<template>
	<view>
		<!-- <a href="tel:400-0000-000">400-0000-000</a> -->
		<u-toast ref="uToast" />
		<view v-if="show" class="loading_view" style="padding:220rpx 0;">
		  <u-loading mode="circle" size="50"></u-loading>
		  <view class="messgae">
			加载中...
		  </view>
		</view>
		
		<view v-else>
		<view class="a_head">
			<image :src="view.a_icon"></image>
		</view>
		
		<view class='a_cont'>
			<view class='a_title'>
				<view class="title">
					{{view.a_name}}
				</view>
				<view class='price' v-if="view.a_money>0">
					<text>{{view.a_money}}</text>
					元/人
				</view>
				<view class='price' v-else>
					<text>免费</text>
				</view>
			</view>
			
			<view class='a_hd'>
				<view class="hd_list">
					<view class='name'>活动时间</view>
					<view class="time">{{view.a_startTime}}</view>
				</view>
				<view class="hd_list">
					<view class='name'>活动地点</view>
					<view class="time">{{view.a_city}} {{view.a_address}} ( 具体地点以电话或短信通知为准 )</view>
				</view>
				<view class="hd_list">
					<view class='name'>活动人数</view>
					<view class="time">已有<text>{{view.a_participateNum}}</text>人报名，剩余名额<text>{{view.a_peopleNum-view.a_participateNum}}</text>人</view>
				</view>
			</view>
			
			<view class="a_text">
				<view class="t_list">
					<view class='name'>活动详情</view>
					<view class="text">
						<rich-text :nodes="view.a_details"></rich-text>
					</view>
				</view>
			</view>
			
			<view class="a_btn_hide"></view>
			
			<view class='a_btn'>
				<view class='zf' @click="onFx_app">
					<view class='img'>
						<image src='../../static/images/zf.png'></image>
					</view>
					<view>分享</view>
				</view>
				<!-- <view class='zf' @click="wx_share">
				小程序的分享
					<view class='img'>
						<image src='../../static/images/zf.png'></image>
					</view>
					<view>分享</view>
				</view> -->
				<view class='zf' @click="onTel">
					<view class="img">
						<image src='../../static/images/tel.png'></image>
					</view>
					<view style="color:#000">电话</view>
				</view>
				
				<view v-if="view.a_status==0 && view.a_isRecord==0" class="btn" @click="onRecord">
					立即报名
				</view>
				<view v-else-if="view.a_status==3" class="btn2">
					已结束
				</view>
				<view v-else class="btn2">
					{{view.a_status!=2?'已报名':'进行中'}}
				</view>
			</view>
			
			<u-popup v-model="fx_show" mode="bottom">
				<view class="fx">
					<view class="f_list">
						<view class="img"><image src="../../static/image/wx.png"></image></view>
						<view class="name">微信好友</view>
					</view>
					<view class="f_list">
						<view class="img"><image src="../../static/image/pyq.png"></image></view>
						<view class="name">微信朋友圈</view>
					</view>
					<view class="f_list">
						<view class="img"><image src="../../static/image/qq.png"></image></view>
						<view class="name">QQ好友</view>
					</view>
					<view class="f_list">
						<view class="img"><image src="../../static/image/qqkj.png"></image></view>
						<view class="name">QQ空间</view>
					</view>
				</view>
			</u-popup>
			
			<u-popup v-model="tel_show" mode="bottom">
				<view class="tel_show">
					联系电话：{{view.a_tel}}
				</view>
			</u-popup>
		</view>
		</view>
	</view>
</template>

<script>
	import pay from '../../static/pay/applets.js'
	export default{
		data(){
			return{
				id:null,
				view:[],
				show:true,
				fx_show:false,
				tel_show:false
			}
		},onLoad(e){
			var id=typeof(e.id)
			
			var name=typeof(e.name)
			
			if(name!='undefined'){
				this.onPay_success('h5',e.name);
			}
			
			if(id!='undefined'){
				this.id=e.id;
				
				this.onView()
			}
		},onPullDownRefresh() {
			this.show=true;
			
			this.onView();
		},methods:{
			onFx_app(){
				uni.shareWithSystem({
				  summary: this.view.a_name+'活动来啦,快来一起看看吧!',
				  href: 'https://www.baidu.com',
				  // imageUrl:this.view.a_icon,
				  success(){
				    this.$refs.uToast.show({
				    	title: '分享完成',
				    	type: 'success'
				    })
				  },
				  fail(){
				    this.$refs.uToast.show({
				    	title: '分享失败',
				    	type: 'success'
				    })
				  }
				})
			},
			onTel(){
				uni.makePhoneCall({
				    phoneNumber: this.view.a_tel
				});
            },
			dial(){
				let tel=this.view.a_tel
				uni.maskPhoneCall({
					phoneNumber:tel
				})
			},
			wx_share(){
				// 微信分享
				this.$refs.uToast.show({
					title: '请点击右上角的进行分享',
					type: 'default'
				})
			},
			onRecord(){
				var that=this;
				
				var token=this.$store.state.Authorization
				
				if(!token){
					return this.$refs.uToast.show({
						title: '您还未登录',
						type: 'default'
					})
				}
				
				// pay.func('/Payactivity/jsapi',{id:this.id})
				
				// return false
				
				this.$request({
					url:'/activity/record',
					data:{id:this.id},
					success(res){
						if(res.data.code==1){
							var price=res.data.data.price;
							
							var name=res.data.data.name;
							if(price>0){
								//h5
								that.onPay_h5(res.data.data.mweb_url,name);
							}else{
								that.$refs.uToast.show({
									title: '报名成功',
									type: 'success'
								})
								
								setTimeout(function(){
									that.show=true;
									
									that.onView();
								},1300);
							}
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'info'
							})
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},onPay_h5(url,name){
				var redirect_url='http://wx.jianmeijiayuan.com/#/pages/activity/activityView?id='+this.id+'&name='+name;
				
				redirect_url=this.getUrl(redirect_url);
				
				location.href=url+"&redirect_url="+redirect_url;
			},
			onPay_success(type='h5',name=""){
				var that=this;
				
				this.$request({
					url:"/bill/activity",
					data:{name:name},
					success(res){
						if(res.data.code==1){
							that.$refs.uToast.show({
								title: '支付成功',
								type:'success'
							});
							if(type=='h5'){
								setTimeout(function(){
									location.href='http://wx.jianmeijiayuan.com/#/pages/activity/activityView?id='+that.id
								},1100)
							}
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							});
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type:'warning'
						});
					}
				})
			},
			getUrl(url){
				url = (url + '').toString();

				return encodeURIComponent(url).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
			},
			onView(){
				var that=this;
				
				this.$request({
					url:'/activity/view',
					data:{id:this.id},
					success(res){
						if(res.data.code==1){
							that.view=res.data.data.view;
							
							that.view.a_details=that.onHtml(that.view.a_details)
							
							that.show=false;
							
							uni.stopPullDownRefresh()
						}else{
							that.$refs.uToast.show({
								title: res.data.msg,
								type:'error'
							})
						}
					},fail(){
						that.$refs.uToast.show({
							title: '网络繁忙',
							type: 'warning'
						})
					}
				})
			},
			onHtml(html){
				let newContent= html.replace(/<img[^>]*>/gi,function(match,capture){
				    match = match.replace(/style="[^"]+"/gi, '').replace(/style='[^']+'/gi, '');
				    match = match.replace(/width="[^"]+"/gi, '').replace(/width='[^']+'/gi, '');
				    match = match.replace(/height="[^"]+"/gi, '').replace(/height='[^']+'/gi, '');
				    return match;
				  });
				  newContent = newContent.replace(/style="[^"]+"/gi,function(match,capture){
				    match = match.replace(/width:[^;]+;/gi, 'max-width:100%;').replace(/width:[^;]+;/gi, 'max-width:100%;');
				    return match;
				  });
				  newContent = newContent.replace(/<br[^>]*\/>/gi, '');
				  newContent = newContent.replace(/\<img/gi, '<img style="max-width:100%;height:auto;display:block;margin-top:0;margin-bottom:0;"');
				  return newContent;
			}
		},
		onShareAppMessage(res) {
			// 微信分享
		    if (res.from === 'button') {// 来自页面内分享按钮
		      console.log(res.target)
		    }
			let data = this.view
			
			let that = this
		    return {
		      title: data.a_name,
		      path: '/pages/activity/activityView?id='+this.id,
			  imageUrl:data.a_icon,
			  content:'我分享了一个活动给你，快来一起参加吧',
			  success(res){
				  that.$refs.uToast.show({
				  	title: '请点击右上角的进行分享',
				  	type: 'default'
				  })
			  }
		    }
		}
	}
</script>

<style scoped>
	.fx{
		display:flex;
		padding:50rpx 0;
	}
	.fx .f_list{
		flex:1;
		font-size:28rpx;
		text-align: center;
	}
	.fx .f_list .img image{
		width:50rpx;
		height:50rpx;
	}
	.tel_show{
		font-size:35rpx;
		padding:50rpx 0;
		text-align: center;
	}
	.a_btn_hide{
		height:110rpx;
	}
	.a_btn{
		height:110rpx;
		width:100%;
		position: fixed;
		bottom:0;
		background:#fff;
	}
	.a_btn .zf{
		padding:20rpx;
		float:left;
		font-size:26rpx;
		margin-left:50rpx;
	}
	.a_btn .zf .img{
		width:50rpx;
		height:50rpx;
	}
	.a_btn view image{
		width:40rpx;
		height:40rpx;
	}
	.a_btn .tel{
		padding:20rpx;
		float:left;
		font-size:26rpx;
		margin-left:50rpx;
	}
	.a_btn .tel .img{
		width:50rpx;
		height:50rpx;
	}
	.a_btn .btn{
		float:right;
		width:420rpx;
		height:110rpx;
		line-height: 110rpx;
		background:#EA4389;
		color:#fff;
		font-size:32rpx;
		text-align: center;
	}
	.a_btn .btn2{
		float:right;
		width:420rpx;
		height:110rpx;
		line-height: 110rpx;
		background:#ccc;
		color:#fff;
		font-size:32rpx;
		text-align: center;
	}
	.a_text{
		margin-top: 20rpx;
		padding:20rpx 30rpx;
		background-color: #fff;
	}
	.a_text .t_list{
		padding:10rpx 0;
	}
	.a_text .t_list .name{
		font-size:32rpx;
		padding:10rpx 0;
	}
	.a_text .t_list .text{
		padding:0 30rpx;
	}
	.a_hd{
		margin-top: 20rpx;
		padding:20rpx 30rpx;
		background-color: #fff;
	}
	.a_hd .hd_list{
		padding:10rpx 0;
	}
	.a_hd .hd_list .name{
		font-size:32rpx;
		padding:10rpx 0;
	}
	.a_hd .hd_list .time{
		font-size: 26rpx;
		color:#888;
	}
	.a_hd .hd_list .time text{
		color:#EA4389;
	}
	.a_head{
		width:100%;
		height:360rpx;
	}
	.a_head image{
		width:100%;
		height:360rpx;
	}
	.a_cont{
		background:#F2F2F2;
	}
	.a_cont .a_title{
		padding:20rpx 30rpx;
		font-size:28rpx;
		background-color: #fff;
	}
	.a_cont .a_title .title{
		font-weight:700;
		font-size:32rpx;
		line-height: 50rpx;
	}
	.a_cont .a_title .price{
		padding:20rpx 0;
	}
	.a_cont .a_title .price text{
		color:#EA4389;
		font-size:42rpx;
		font-weight: 600;
		margin-right:5rpx;
	}
	.a_cont .a_title .tags{
		padding:10rpx 0;
	}
	.a_cont .a_title .tags view{
		background:#F5F5F5;
		color:#888;
	}
</style>
